[設定] 全站CSS樣式調整

note

之前原本是將設定寫在筆記(Note)區的。將當初的內容整理到網站變更的文章中。

僅記錄調整的方法，如果需要看網站目前真實設定可以參考置頂區的目前全站設定檔案

找到資料夾中的custom.css

.
├── README.md
├── ...
├── babel.config.js
├── package-lock.json
├── package.json
├── sidebars.js
├── src
│   ├── components
│   │   └── HomepageFeatures
│   ├── css
│   │   └── custom.css
│   └── pages
│       ├── ...
│       └── my-markdown-page.md
└── static
    └── img
        ├── ...
        └── undraw_docusaurus_tree.svg

接著可以根據需要設定CSS樣式，就會套用到全站上

./src/css/custom.css

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

[data-theme='dark']{
  /* --custom--heading-color:rgb(233, 114, 114);
  --ifm-heading-color:var(--custom--heading-color);
  --ifm-menu-color-active:var(--custom--heading-color); */
}
:root{
  --ifm-heading-color:var(--ifm-menu-color-active);
  /* --ifm-link-hover-decoration:none; */
}
.menu__link--active{
  font-weight: bolder;
}

/* article a{
  position: relative;
}
article a::after{
  content: "";
  height: 2px;
  width: 0%;
  background-color: var(--ifm-color-primary-darker);
  position: absolute;
  top:100%;
  left: 0%;
  transition: width ease-in-out .5s .3s;
}
article a:hover{
  color:var(--ifm-color-primary-darker);
}
article a:hover::after{
  width: 100%;
} */



/* ------------------------------------------------ */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #315f7c;
  --ifm-color-primary-dark: #2c5570;
  --ifm-color-primary-darker: #2a5169;
  --ifm-color-primary-darkest: #224257;
  --ifm-color-primary-light: #366888;
  --ifm-color-primary-lighter: #386d8f;
  --ifm-color-primary-lightest: #407ba1;
  --ifm-code-font-size: 95%;

  /* --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); */
  --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.3); /*custom*/
}
:root[data-theme='dark']{
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); /*custom*/
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
/* dark mode settings1 */
[data-theme='dark'] {
  --ifm-color-primary: #ffc677;
  --ifm-color-primary-dark: #ffbe64;
  --ifm-color-primary-darker: #ffb652;
  --ifm-color-primary-darkest: #ff9f1a;
  --ifm-color-primary-light: #ffce8a;
  --ifm-color-primary-lighter: #ffd69c;
  --ifm-color-primary-lightest: #ffedd5;
}


/* dark mode settings2 */
/* [data-theme='dark'] {
  --ifm-color-primary: #f2a6da;
  --ifm-color-primary-dark: #ed82cb;
  --ifm-color-primary-darker: #ea71c4;
  --ifm-color-primary-darkest: #e23bae;
  --ifm-color-primary-light: #f5b8e1;
  --ifm-color-primary-lighter: #f7cae9;
  --ifm-color-primary-lightest: #fadbf0;
} */

/* dark mode settings3 */
[data-theme='dark'] {
  --ifm-color-primary: #f88282;
  --ifm-color-primary-dark: #f77070;
  --ifm-color-primary-darker: #f65e5e;
  --ifm-color-primary-darkest: #f54c4c;
  --ifm-color-primary-light: #f99494;
  --ifm-color-primary-lighter: #faa6a6;
  --ifm-color-primary-lightest: #fbb8b8;
}


html[data-theme='dark'] {
  /* 高量程式碼區塊 */
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
.alert--success{
  --ifm-alert-background-color-highlight: rgba(0,164,0,0.30);
}

html {
  scroll-behavior: smooth;
}

.docs-wrapper h2{
  border:solid var(--ifm-color-primary);
  border-width: 0px 0px 0px 5px;
  padding: .1em 0em .1em .3em;
  line-height: 1;
}

iframe.codepen{
  margin: 16px 0 16px 0;
}

色系變更

我在上方CSS內預先設定了好幾組色系，因為CSS後優先於前的特性，我可以使用註解快速調整目前希望套用到哪個色系

如果有使用亮暗模式的話，也可以分別設定

至於顏色的調色盤，官方則是也有提供相關的工具